<template>
  <div ref="dswd-home-first">
    <div
      v-if="device === 'desktop'"
      class="dswd-home-first"
    >
      <div class="oper-card">
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'quick'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-second')"
          >
            <img
              v-if="cardName === 'quick'"
              src="../../assets/image/home/first/quick-hover.png"
              alt="quick"
            >
            <img
              v-else
              src="../../assets/image/home/first/quick.png"
              alt="quick"
            >
          </div>
          <div class="card-name">快</div>
        </div>
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'perfect'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-three')"
          >
            <img
              v-if="cardName === 'perfect'"
              src="../../assets/image/home/first/perfect-hover.png"
              alt="perfect"
            >
            <img
              v-else
              src="../../assets/image/home/first/perfect.png"
              alt="perfect"
            >
          </div>
          <div class="card-name">准</div>
        </div>
        <div class="card-item" />
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'more'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-fourth')"
          >
            <img
              v-if="cardName === 'more'"
              src="../../assets/image/home/first/more-hover.png"
              alt="more"
            >
            <img
              v-else
              src="../../assets/image/home/first/more.png"
              alt="more"
            >
          </div>
          <div class="card-name">多</div>
        </div>
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'save'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-five')"
          >
            <img
              v-if="cardName === 'save'"
              src="../../assets/image/home/first/save-hover.png"
              alt="save"
            >
            <img
              v-else
              src="../../assets/image/home/first/save.png"
              alt="save"
            >
          </div>
          <div class="card-name">省</div>
        </div>
      </div>
      <div id="dswd-home-first-carousel" class="dswd-home-first-carousel">
        <el-carousel ref="dswd-home-first-carousel" height="543px" arrow="never">
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner01.png" alt="01">
              <div class="item-content">
                <div class="main-title">TransBIM（大智绘）AI建筑设计平台</div>
                <div class="sub-title">
                  以大数据及人工智能技术为基础，采用自主领先的核心技术，<br>专注于建筑施工图敏捷开发领域
                </div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner02.png" alt="02">
              <div class="item-content">
                <div class="main-title">
                  建筑、结构、给排水、电气、暖通<br>全流程一键出图
                </div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner0301.png" alt="03">
              <div class="item-content">
                <div class="main-title">2021年10月1日正式上线<br>免费试用</div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner04.png" alt="04">
              <div class="item-content">
                <div class="main-title">用科技改变生活<br>用AI改变设计</div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="dswd-home-first-xiahua">
        <img
          src="../../assets/image/home/first/img_xiahua.png"
          alt="img_xiahua"
        >
      </div>
    </div>
    <div v-if="device==='ipad'" class="dswd-p-home-first">
      <div id="dswd-home-first-carousel" class="dswd-home-first-carousel">
        <el-carousel
          ref="dswd-home-first-carousel"
          :initial-index="initialIndex"
          :height="mcCarouselHeight"
          arrow="never"
        >
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner01.png" alt="01">
              <div ref="item-content0" class="item-content">
                <div class="main-title">TransBIM（大智绘）AI建筑设计平台</div>
                <div class="sub-title">
                  以大数据及人工智能技术为基础，采用自主领先的核心技术，<br>专注于建筑施工图敏捷开发领域
                </div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner02.png" alt="02">
              <div ref="item-content1" class="item-content">
                <div class="main-title">
                  建筑、结构、给排水、电气、暖通<br>全流程一键出图
                </div>
              </div>
              <div class="oper-button-bak" />
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner0301.png" alt="03">
              <div ref="item-content2" class="item-content">
                <div class="main-title">2021年10月1日正式上线<br>免费试用</div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner04.png" alt="04">
              <div ref="item-content3" class="item-content">
                <div class="main-title">用科技改变生活<br>用AI改变设计</div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="oper-card">
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'quick'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-second')"
          >
            <img
              v-if="cardName === 'quick'"
              src="../../assets/image/home/first/quick-hover.png"
              alt="quick"
            >
            <img
              v-else
              src="../../assets/image/home/first/quick.png"
              alt="quick"
            >
          </div>
          <div class="card-name">快</div>
        </div>
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'perfect'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-three')"
          >
            <img
              v-if="cardName === 'perfect'"
              src="../../assets/image/home/first/perfect-hover.png"
              alt="perfect"
            >
            <img
              v-else
              src="../../assets/image/home/first/perfect.png"
              alt="perfect"
            >
          </div>
          <div class="card-name">准</div>
        </div>
        <div class="card-item" />
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'more'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-fourth')"
          >
            <img
              v-if="cardName === 'more'"
              src="../../assets/image/home/first/more-hover.png"
              alt="more"
            >
            <img
              v-else
              src="../../assets/image/home/first/more.png"
              alt="more"
            >
          </div>
          <div class="card-name">多</div>
        </div>
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'save'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-five')"
          >
            <img
              v-if="cardName === 'save'"
              src="../../assets/image/home/first/save-hover.png"
              alt="save"
            >
            <img
              v-else
              src="../../assets/image/home/first/save.png"
              alt="save"
            >
          </div>
          <div class="card-name">省</div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device === 'mobile'" class="dswd-m-home-first">
      <div id="dswd-home-first-carousel" class="dswd-home-first-carousel">
        <el-carousel
          ref="dswd-home-first-carousel"
          :initial-index="initialIndex"
          :height="mcCarouselHeight"
          arrow="never"
        >
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner01.png" alt="01">
              <div ref="item-content0" class="item-content">
                <div class="main-title">TransBIM（大智绘）AI建筑设计平台</div>
                <div class="sub-title">
                  以大数据及人工智能技术为基础，采用自主领先的核心技术，<br>专注于建筑施工图敏捷开发领域
                </div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner02.png" alt="02">
              <div ref="item-content1" class="item-content">
                <div class="main-title">
                  建筑、结构、给排水、电气、暖通<br>全流程一键出图
                </div>
              </div>
              <div class="oper-button-bak" />
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner0301.png" alt="03">
              <div ref="item-content2" class="item-content">
                <div class="main-title">2021年10月1日正式上线<br>免费试用</div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="dswd-home-first-carousel-item">
              <img src="../../assets/image/home/first/banner04.png" alt="04">
              <div ref="item-content3" class="item-content">
                <div class="main-title">用科技改变生活<br>用AI改变设计</div>
              </div>
              <div class="oper-button">
                <span class="dswd-button" @click="immExperience">立即体验</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="oper-card">
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'quick'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-second')"
          >
            <img
              v-if="cardName === 'quick'"
              src="../../assets/image/home/first/quick-hover.png"
              alt="quick"
            >
            <img
              v-else
              src="../../assets/image/home/first/quick.png"
              alt="quick"
            >
          </div>
          <div class="card-name">快</div>
        </div>
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'perfect'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-three')"
          >
            <img
              v-if="cardName === 'perfect'"
              src="../../assets/image/home/first/perfect-hover.png"
              alt="perfect"
            >
            <img
              v-else
              src="../../assets/image/home/first/perfect.png"
              alt="perfect"
            >
          </div>
          <div class="card-name">准</div>
        </div>
        <div class="card-item" />
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'more'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-fourth')"
          >
            <img
              v-if="cardName === 'more'"
              src="../../assets/image/home/first/more-hover.png"
              alt="more"
            >
            <img
              v-else
              src="../../assets/image/home/first/more.png"
              alt="more"
            >
          </div>
          <div class="card-name">多</div>
        </div>
        <div class="card-item">
          <div
            class="card-bg"
            @mouseover="cardName = 'save'"
            @mouseleave="cardName = null"
            @click="scrollToLocation('dswd-home-five')"
          >
            <img
              v-if="cardName === 'save'"
              src="../../assets/image/home/first/save-hover.png"
              alt="save"
            >
            <img
              v-else
              src="../../assets/image/home/first/save.png"
              alt="save"
            >
          </div>
          <div class="card-name">省</div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
let self
export default {
  components: {},
  data() {
    return {
      cardName: null,
      mcCarouselHeight: '543px',
      initialIndex: 0,
      autoplay: false
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
      clientWidth: (state) => state.app.clientWidth
    })
  },
  watch: {
    clientWidth() {
      this.resizeHandler()
    }
  },
  beforeCreate() {
    self = this
  },
  mounted() {
    this.resizeHandler()
    this.slideBanner()
  },
  methods: {
    resizeHandler() {
      this.$nextTick(() => {
        const first_width = this.$refs['dswd-home-first'].clientWidth
        this.mcCarouselHeight = first_width * 0.56 + 200 + 'px'
      })
    },
    scrollToLocation(refName) {
      this.$nextTick(() => {
        const offsetTop = document.getElementById(refName).offsetTop - 80
        const ScrollTop = (number = 0, time) => {
          if (!time) {
            document.body.scrollTop = document.getElementById(
              'router-content'
            ).scrollTop = number
            return number
          }
          const spacingTime = 20 // 设置循环的间隔时间  值越小消耗性能越高
          let spacingInex = time / spacingTime // 计算循环的次数
          let nowTop =
            document.body.scrollTop +
            document.getElementById('router-content').scrollTop // 获取当前滚动条位置
          const everTop = (number - nowTop) / spacingInex // 计算每次滑动的距离
          const scrollTimer = setInterval(() => {
            if (spacingInex > 0) {
              spacingInex--
              ScrollTop((nowTop += everTop))
            } else {
              clearInterval(scrollTimer) // 清除计时器
            }
          }, spacingTime)
        }
        ScrollTop(offsetTop, 200)
      })
    },
    immExperience() {
      this.$router.push('/layout/contactus')
    },
    startAuto() {
      if (this.autoplay === false) {
        this.autoplay = true
      }
    },
    stopAuto() {
      if (this.autoplay === true) {
        this.autoplay = false
      }
    },
    slideBanner() {
      // 选中item的盒子
      var box = document.getElementById('dswd-home-first-carousel')
      // 手指起点X坐标
      var startPoint = 0
      // 手指滑动重点X坐标
      var stopPoint = 0

      // 重置坐标
      var resetPoint = function() {
        startPoint = 0
        stopPoint = 0
      }
      // 手指按下
      box.addEventListener('touchstart', function(e) {
        // 手指按下的时候停止自动轮播
        self.stopAuto()
        // 手指点击位置的X坐标
        startPoint = e.changedTouches[0].pageX
      })
      // 手指滑动
      box.addEventListener('touchmove', function(e) {
        // 手指滑动后终点位置X的坐标
        stopPoint = e.changedTouches[0].pageX
      })
      // 当手指抬起的时候，判断图片滚动离左右的距离
      box.addEventListener('touchend', function(e) {
        if (stopPoint === 0 || startPoint - stopPoint === 0) {
          resetPoint()
          return
        }
        if (startPoint - stopPoint > 0) {
          resetPoint()
          self.$refs['dswd-home-first-carousel'].next()
          return
        }
        if (startPoint - stopPoint < 0) {
          resetPoint()
          self.$refs['dswd-home-first-carousel'].prev()
          return
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/home/first.scss";
::v-deep .dswd-home-first-carousel {
  .el-carousel__indicators {
    bottom: 128px;
    .el-carousel__indicator--horizontal {
      padding: 12px;
    }
    .is-active {
      .el-carousel__button {
        background: #ff0000;
      }
    }
    .el-carousel__button {
      width: 36px;
      height: 6px;
      background: #f3f3f3;
      border-radius: 3px;
      opacity: 1;
    }
  }
}
::v-deep .dswd-p-home-first {
  .dswd-home-first-carousel {
    .el-carousel__indicators {
      bottom: 0;
      .el-carousel__indicator--horizontal {
        padding: 7px;
      }
      .is-active {
        .el-carousel__button {
          background: #ff0000;
        }
      }
      .el-carousel__button {
        width: 20px;
        height: 6px;
        background: #f3f3f3;
        border-radius: 3px;
        opacity: 1;
      }
    }
  }
}
::v-deep .dswd-m-home-first {
  .dswd-home-first-carousel {
    .el-carousel__indicators {
      bottom: 0;
      .el-carousel__indicator--horizontal {
        padding: 7px;
      }
      .is-active {
        .el-carousel__button {
          background: #ff0000;
        }
      }
      .el-carousel__button {
        width: 20px;
        height: 6px;
        background: #f3f3f3;
        border-radius: 3px;
        opacity: 1;
      }
    }
  }
}
</style>
